<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>联动</title>
    <script type="text/javascript">
        $(function () {
            //省的值发生变化的时候，触发这个办法
            $("#province").change(function () {
                //获取省的value值，用于判断
                var province = $("#province").val();
                if (province == 1){
                    //省份选择北京
                    var htmlStr =
                        "<option value=\"0\">请选择城区</option> "
                        +"<option value=\"0\">昌平区</option> "
                        + "<option value=\"0\">顺义区</option> "
                        + "<option value=\"0\">海淀区</option> "
                        + "<option value=\"0\">房山区</option> "
                        + "<option value=\"0\">西城区</option> ";
                    //选择城区，赋值内容
                    $("#city").html(htmlStr);
                }
                if (province == 2){
                    //省份选择河南
                    var htmlStr =
                        "<option value=\"0\">请选择城区</option> "
                        +"<option value=\"0\">郑州市</option> "
                        + "<option value=\"0\">开封市</option> "
                        + "<option value=\"0\">洛阳市</option> "
                        + "<option value=\"0\">信阳市</option> "
                        + "<option value=\"0\">濮阳市</option> ";
                    //选择城区，赋值内容
                    $("#city").html(htmlStr);
                }
                if (province == 3){
                    //省份选择山东
                    var htmlStr =
                        "<option value=\"0\">请选择城区</option> "
                        +"<option value=\"0\">济南市</option> "
                        + "<option value=\"0\">青岛市</option> "
                        + "<option value=\"0\">菏泽市</option> "
                        + "<option value=\"0\">日照市</option> ";
                    //选择城区，赋值内容
                    $("#city").html(htmlStr);
                }

            })
        })
    </script>
</head>
<body>
   <table border="1" width="800px" >
       <tr>
           <td>省：
               <select id="province">
                   <option value="0">---请选择省份---</option>
                   <option value="1">---北京市---</option>
                   <option value="2">---河南省---</option>
                   <option value="3">---山西省---</option>
               </select>
           </td>
           <td>市:
               <select id="city">
                   <option value="0">-----请选择城市-----</option>

               </select>
           </td>
       </tr>

   </table>
</body>
</html>